import React, { Component, Fragment } from 'react';
import './App_style.css';
import { CSSTransition } from 'react-transition-group';

class App extends Component{
  constructor(props){
   super(props);
   this.state = {
     show:true
   }
   this.handleToggle = this.handleToggle.bind(this);
  }
  render(){
    return (
    <Fragment>
      <CSSTransition
        in={this.state.show}
        timeout={1000}
        ClassName='fade'
        unmountOnExitonEnter={(el)=>{el.style.color='blue'}}
      >
        <div>hello</div>
      </CSSTransition>
      <div className={this.state.show?'show':'hide'}>hello</div>
      <button onClick={this.handleToggle}>toggole</button>
    </Fragment>
    );
  }
  handleToggle(){
    this.setState({
      show: this.state.show?false:true
    })
  }
}

export default App;